<template>
<div>
	<header class="site-header jumbotron">
		<div class="container">
			<div class="row">
				<div class="col-xs-12">
					<h1>请发表对《滕王阁序》的评论</h1>
				</div>
			</div>
		</div>
	</header>
	<div class="container">
		<!-- 3.  编写组件-->
		<Add v-bind:addComment='addComment'/>
		<List v-bind:comments='comments' v-bind:delComment='delComment' />
	</div>
</div>

</template>

<script>
	// 1. 引入子組件
	import Add from './components/Add.vue'
	import List from './components/List.vue'
	
export default {
	// 2. 映射組件
	components:{
		Add, List
	},
	data() {
		return {
			comments:[ // 一般情况下数据在哪个组件，操作数据的行为就必须在哪个组件，这是一个约定俗称的规定
				{name:'yi小敏', content:'豫章故郡，洪都新府。星分翼轸，地接衡庐。'},
				{name:'yi小宇', content:'襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。'},
				{name:'yi南开', content:'雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。'}
			]
		}
	},
	methods:{
		addComment(comment) {
			this.comments.unshift(comment); // unshift（）在数据的最前面添加一个元素
		},
		delComment(index) {
			this.comments.splice(index, 1);
		}
	}
}	
</script>

<style>
</style>
